<template>
  <div class="energy-line-bar">
    <div class="energy-line-bar-main">
      <div class="main-title">
        <div class="main-title-name">标煤单耗A+F</div>
        <div><img :src="pathPng" /></div>
      </div>
      <div class="energy-line-bar-main-body">
        <dv-charts :option="lineBarConfig" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnergyMiddleLineBarCmp',
  props:["title"],
  data () {
    return {
      pathPng: require("../../assets/path.png"),
      lineBarConfig:  {
        title: {
          text: ''
        },
        grid: {
          top: '0px',
          bottom: '0px',
          left: '10px',
          right: '10px',
          containLabel: true,
        },
        xAxis: {
          name: '',
          data: ['', '', '', '', '', '', '', '', '', '', '', ''],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          }
        },
        yAxis: {
          name: '',
          data: 'value',
          axisLine: {
            show: false,
            // stroke: '#8cd5c2',
            // lineWidth: 1
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },

        },
        series: [
          {
            data: [1100, 1050, 1100, 1050, 1000, 1050, 1150, 1200, 1200, 1200, 1200, 1200 ],
            type: 'line',
            lineStyle: {
              stroke: '#FFBD00'
            }
          },
          {
            data: [1050, 1000, 1050, 1000, 950, 1000, 1100, 1150, 1150, 1150, 1150, 1150 ],
            type: 'line',
            lineStyle: {
              stroke: '#62FF00'
            }
          },
          {
            data: [950, 950, 950, 950, 950, 950, 950, 950, 950, 950, 950, 950 ],
            type: 'line',
            lineStyle: {
              stroke: '#FF0000'
            }
          },
          {
            data: [900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900 ],
            type: 'line',
            lineStyle: {
              stroke: '#FF6200'
            }
          },
          {
            data: [850, 850, 850, 850, 850, 850, 850, 850, 850, 850, 850, 850 ],
            type: 'line',
            lineStyle: {
              stroke: '#00FBFF'
            }
          },
          {
            data: [830, 830, 830, 830, 830, 830, 830, 830, 830, 830, 830, 830 ],
            type: 'line',
            lineStyle: {
              stroke: '#0091FF'
            }
          },
          {
            data: [810, 810, 810, 810, 810, 810, 810, 810, 810, 810, 810, 810 ],
            type: 'line',
            lineStyle: {
              stroke: '#0038FF'
            }
          },
          {
            data: [790, 790, 790, 790, 790, 790, 790, 790, 790, 790, 790, 790 ],
            type: 'line',
            lineStyle: {
              stroke: '#6800FF'
            }
          },
          {
            data: [770, 770, 770, 770, 770, 770, 770, 770, 770, 770, 770, 770 ],
            type: 'line',
            lineStyle: {
              stroke: '#DB00FF'
            }
          },
          {
            data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750 ],
            type: 'line',
            lineStyle: {
              stroke: '#FF00A2'
            }
          },
          {
            data: [730, 730, 730, 730, 730, 730, 730, 730, 730, 730, 730, 730 ],
            type: 'line',
            lineStyle: {
              stroke: '#FF00A2'
            }
          }
        ]
      },
      
    }
  }
}
</script>

<style lang="scss" scoped>
.energy-line-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: rgba(15,47,92,0.2);
  
  .energy-line-bar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

    .main-title {
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
      top: 30px;

      .main-title-name {
        font-size: .375rem;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: .375rem;
        margin-bottom: 10px;
      }
    }

    .energy-line-bar-main-body {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
